<template>
  <div class="tabbed">
    <ul>
      <li
        v-for="(item, index) in tagLs"
        :key="index"
        :class="{ active: item.isActive }"
      >
        <a @click="handlerLink(item)"
          >{{ item.title }}
          <em v-if="item.fullPath != '/dashboard'"
            ><i class="el-icon-close" @click.stop="closeTag(index)"></i
          ></em>
        </a>
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
import router from "@/router";
import { compile } from "path-to-regexp";
import { Component, Vue, Watch } from "vue-property-decorator";
import { RouteRecord, Route } from "vue-router";
import { glbVariables } from "@/utils/Utils";
@Component({
  name: "Breadcrumb",
})
export default class extends Vue {
  private breadcrumbs: RouteRecord[] = [];

  @Watch("$route")
  private onRouteChange(route: Route) {
    // if you go to the redirect page, do not update the breadcrumbs
    if (route.path.startsWith("/redirect/")) {
      return;
    }
    this.getBreadcrumb();
  }
  private tagLs: Array<any> = [];
  created() {
    this.tagLs = glbVariables.tagLs;
  }

  private handlerLink(item: any) {
    if (this.$route.fullPath == item.fullPath) return;
    this.$router.push(item.fullPath);
  }

  private closeTag(index: number) {
    this.tagLs.splice(index, 1);
    this.$router.push(this.tagLs[this.tagLs.length - 1].fullPath);
  }

  private generLink(item: Route) {
    var ts = [];
    if (item.query) {
      var keys = Object.keys(item.query);
      if (keys.length > 0) {
        for (let k of keys) {
          let v = item.query[k];
          ts.push(`${k}=${v}`);
        }
      }
    }
    var path = item.fullPath;
    return path;
  }

  private getBreadcrumb() {
    let matched = this.$route.matched.filter(
      (item) => item.meta && item.meta.title
    );

    const first = matched[0];
    if (!this.isDashboard(first)) {
      matched = [
        { path: "/dashboard", meta: { title: "主目录" } } as RouteRecord,
      ].concat(matched);
    }
    this.breadcrumbs = matched.filter((item) => {
      return item.meta && item.meta.title && item.meta.breadcrumb !== false;
    });
  }

  private isDashboard(route: RouteRecord) {
    const name = route && route.meta && route.meta.title;
    return name === "Dashboard";
  }

  private pathCompile(path: string) {
    // To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561
    const { params } = this.$route;
    const toPath = compile(path);
    return toPath(params);
  }

  private handleLink(item: any) {
    const { redirect, path } = item;
    if (redirect) {
      this.$router.push(redirect);
      return;
    }
    this.$router.push(this.pathCompile(path));
  }
}
</script>

<style lang="scss" scoped>
// .el-breadcrumb__inner,
// .el-breadcrumb__inner a {
//   font-weight: 400 !important;
// }
// .nav-menu ul {
//   width: 100%;
//   height: 100%;
//   list-style-type: none;
//   padding: 0;
//   margin: 0;
//   li {
//     margin-left: 10px;
//     float: left;
//   }
// }

.tabbed {
  margin-top: 5px;
  line-height: 40px;
  height: 40px;
  ul {
    margin: 0;
    padding: 0;

    list-style-type: none;
    li {
      min-width: 100px;
      text-align: center;
      //border: 0.5px solid red;
      background-color: rgb(192, 186, 186, 0.3);
      border-radius: 15px 15px 0px 0px;
      float: left;
      a {
        cursor: pointer;
        width: 100%;
        display: inline-block;
        height: 100%;
        padding: 5px;
        font-size: 8px;
        //background-color: rgb(170, 164, 164);
        position: relative;
        em {
          position: absolute;
          width: 20px;
          height: 20px;

          top: -10px;
          right: 5px;
          i {
            font-weight: bold;
            font-size: 8px;
            padding: 1px;
            color: white;
            visibility: hidden;
          }
          i:hover {
            background-color: rgb(197, 90, 90, 0.7);
            border-radius: 50%;
          }
        }
      }
    }
    li.active,
    li:hover {
      background-color: rgb(192, 186, 186, 0.9);
      transition: border-color 0.3s, background-color 0.8s, color 0.3s;
      i {
        visibility: visible;
      }
    }

    li + li {
      border-left: 1px solid rgb(167, 165, 165);
    }
  }
}
// .app-breadcrumb.el-breadcrumb {
//   display: inline-block;
//   font-size: 14px;
//   line-height: 50px;
//   margin-left: 8px;

//   .no-redirect {
//     color: #97a8be;
//     cursor: text;
//   }
// }
</style>
